<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width initial-scale=1 user-scalable=no maximum-scale=1">
  <title>JavaScript Kinetic Scrolling</title>
  <link rel="stylesheet" href="css/pure-nr-min.css">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="pure-u-1" id="view">
        <aside><h1>JavaScript Kinetic Scrolling</h1></aside>
        <p>#1: <strong>Basic drag-and-scroll</strong> (<a href="1/index.html">demo</a>, <a href="http://ariya.ofilabs.com/2013/08/javascript-kinetic-scrolling-part-1.html">explanation</a>).<br/>No momentum effect yet, just a plain scroll view.</p>
        <p>#2: <strong>Flick list</strong> with momentum (<a href="2/index.html">demo</a>, <a href="http://ariya.ofilabs.com/2013/11/javascript-kinetic-scrolling-part-2.html">explanation</a>).<br/>Smooth acceleration and deceleration.</p>
        <p>#3: <strong>Snap-to-grid </strong> flick list (<a href="3/index.html">demo</a>, <a href="http://ariya.ofilabs.com/2013/12/javascript-kinetic-scrolling-part-3.html">explanation</a>).<br/>Inertial deceleration to stop at the right position.</p>
        <p>#4: <strong>Horizontal swipe</strong> to browse photos (<a href="4/index.html">demo</a>, <a href="http://ariya.ofilabs.com/2013/12/javascript-kinetic-scrolling-part-4.html">explanation</a>).<br/>Parallax effect included.</p>
        <p>#5: <strong>Cover Flow</strong> with CSS transform (<a href="5/index.html">demo</a>, <a href="http://ariya.ofilabs.com/2014/01/javascript-kinetic-scrolling-part-5-cover-flow-effect.html">explanation</a>).<br/>Flipping images in 3-D space.</p>
        <p>#6: <em>Coming soon</em>.</p>
   </div>
</body>
</html>
